<template>
  <view>
    <l-background />
    <summary-card box-shadow="none" title="待收账款(元)" border-radius="0" :info="accountInfo" :total-amount="inProgress" />
    <view class="padding-lr-30 padding-bottom-30">
      <template v-if="list.length">
        <view v-for="(item,index) in list" :key="index" class="card border padding-30 margin-top-30" hover-class="card-hover" :hover-stay-time="70" @click="toDetail(item)">
          <view class="title flex-row align-center justify-between relative">
            <view class="flex-row align-center">
              <text class="text-32 color-t1 text-bold">{{ item.username }}</text>
              <!--<text class="text-32 color-t1 text-bold margin-left-30">1111111</text>-->
            </view>
            <text class="tbb-arrow-right color-t3 text-24" />
            <view class="line" />
          </view>
          <view class="card subCard margin-top-30 flex-row align-center">
            <view class="flex-item flex-column flex-center">
              <text class="text-24 color-t3">剩余待还(元)</text>
              <view class="margin-top-16">
                <text class="text-32 color-error text-bold">{{ item.outstanding.toFixed(2) }}</text>
              </view>
            </view>
            <view class="flex-item flex-column flex-center center">
              <text class="text-24 color-t3">已还账款(元)</text>
              <view class="margin-top-16">
                <text class="text-32 color-t1 text-bold">{{ item.repayments.toFixed(2) }}</text>
              </view>
            </view>
            <view class="flex-item flex-column flex-center">
              <text class="text-24 color-t3">应还账款(元)</text>
              <view class="margin-top-16">
                <text class="text-32 color-t1 text-bold">{{ item.accounts.toFixed(2) }}</text>
              </view>
            </view>
          </view>
        </view>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" is-loading />
        <l-no-data v-else text="暂无数据" type="data" />
      </template>
    </view>
  </view>
</template>

<script>
import { pageCreditManagement, sumCreditManagement, deprecated } from '../api'
import { mapGetters } from 'vuex'
export default {
  name: 'AccountManagement',
  data() {
    return {
      inProgress: 0,
      accountInfo: [
        { label: '已收账款(元)', value: 0, fixed: true },
        { label: '应收账款(元)', value: 0, fixed: true }
      ],
      page: 1,
      pageSize: 10,
      showSkeleton: true,
      hasMore: true,
      list: []
    }
  },
  computed: {
    ...mapGetters({
      auth: 'auth'
    })
  },
  created() {
    this.reload()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    // 获取列表
    async getList() {
      const [err, res] = await pageCreditManagement({
        current: this.page,
        limit: this.pageSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!res.data.data) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    reload() {
      this.page = 1
      this.hasMore = true
      this.getList()
      this.sumCreditManagement()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    async sumCreditManagement() { 
      const [err, res] = await deprecated()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      if (data) {
        this.inProgress = data.outstanding
        this.accountInfo[0].value = data.repayments
        this.accountInfo[1].value = data.accounts
      }
    },
    toDetail(row) {
      if (!this.auth.includes('creditManagement_view')) {
        this.toast('没有权限')
        return
      }
      this.jump('/user/account-user-detail/account-user-detail?username=' + row.username)
    }
  }
}
</script>

<style scoped lang="scss">
.card{
  border-radius: 20rpx;
}
.border{
  border: 2rpx solid $color-border;
}
.line{
  width: 4rpx;
  height: 32rpx;
  background: $color-primary;
  border-radius: 4rpx;
  @include position(absolute,50%,$left:-30rpx);
  transform: translateY(-50%);
}
.subCard{
  background:$color-background;
  height: 152rpx;
  padding:0 14rpx;
}
.center{
  border-left:2rpx solid $color-border;
  border-right:2rpx solid $color-border;
}
</style>
